<template>
  <!-- 具名插槽 -->
  <slot name="header" />

  <!-- 匿名插槽 -->
  <slot />

  <slot name="footer" />

  <!-- 作用域插槽:在子组件动态绑定参数 派发给父组件的slot去使用 (带值的匿名插槽) -->
  <slot :custom="content"></slot>

  <!-- 动态插槽，插槽可以是一个变量名 -->
  <slot name="slotName"></slot>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface person {
  name: string;
  age: number;
}

const content = ref<person[]>([
  { name: '狂三', age: 18 },
  { name: '折纸', age: 10 },
  { name: '十香', age: 16 }
]);
</script>
